<template>
  <window class="m-dispatch-detail am-form-group" ref="win" :title="title">
    <div class="am-form-group am-u-lg-12">
      <div class="title">
        选中{{checkLength}}个，有效{{customerResourceId.length}}个（未分配），无效{{checkLength - customerResourceId.length}}个（已分配）
      </div>
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
        <el-form-item label="请选择区域" prop="areaTeamId">
          <el-select size="small" v-model="form.areaTeamId" placeholder="请选择区域">
            <el-option
              v-for="item in areaTeams"
              :key="item.areaTeamId"
              :label="item.name"
              :value="item.areaTeamId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="type === 'campus'" no-data-text="无数据，请切换区域" label="请选择校区" prop="busTeamId">
          <el-select size="small" v-model="form.busTeamId" placeholder="请选择校区">
            <el-option
              v-for="item in busTeams"
              :key="item.campusId"
              :label="item.campusName"
              :value="item.campusId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="type === 'operator'" label="请选择业务组" prop="busTeamId">
          <el-select size="small" v-model="form.busTeamId" placeholder="请选择业务组">
            <el-option
              v-for="item in busTeamList"
              :key="item.busTeamId"
              :label="item.name"
              :value="item.busTeamId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="type === 'operator'" label="请选择咨询师" prop="followId">
          <el-select :disabled="follows.length === 0" size="small" v-model="form.followId" placeholder="请选择咨询师">
            <el-option
              v-for="item in follows"
              :key="item.followId"
              :label="item.name"
              :value="item.followId">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="am-text-center">
          <el-button type="success" @click="handleConfirm()">确认分配</el-button>
          <el-button type="success" @click="handleCancel()">取消</el-button>
        </div>
      </el-form>
    </div>
  </window>
</template>

<script>
  import io from '../../lib/io'

  export default{
    components: {},
    data: function () {
      return {
        type: 'campus',
        title: '分配到校区',
        form: {
          areaTeamId: '',
          busTeamId: '',
        },
        busTeamList: [],
        rules: {
          areaTeamId: [
            { required: true, message: '请选择区域', trigger: 'change' }
          ],
          busTeamId: [
            { required: true, message: '请选择校区', trigger: 'change' }
          ],
          followId: [
            { required: true, message: '请选择咨询师', trigger: 'change' }
          ],
        },
        checkLength: 0,
        customerResourceId: [],
        follows: [],
        tableData: [],
      }
    },
    created () {
      if (window.config.areaTeams) {
        this.form.areaTeamId = window.config.areaTeams[0].areaTeamId
      }
    },
    watch: {
      'form.areaTeamId' () {
        if (this.type === 'operator') {
          this.loadAllBusTeamList()
        }
        this.form.busTeamId = ''
      },
      'form.busTeamId' (newVal) {
        if (this.type === 'operator' && newVal) {
          this.getFollows()
        }
        this.form.follwId = ''
      }
    },
    computed: {
      areaTeams: function () {
        return this.$root.config.areaTeams || []
      },
      busTeams: function () {
        return ( ( this.form.areaTeamId  ) ? ( this.$root.config.campusList.filter((val) => val.areaTeamId === this.form.areaTeamId) || [] ) : [] )
      },
    },
    methods:{
      handleConfirm () {
        if (this.type === 'operator') {
          this.alloFollow()
        } else {
          this.alloCampus()
        }
      },
      loadAllBusTeamList: function () {
        io.post(io.allBusTeamList, {
          areaTeamId : this.form.areaTeamId
        }, (ret) => {
          if (ret.success) {
            this.busTeamList = ret.data
            this.form.busTeamId = ''
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      alloCampus () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            io.post(io.alloCampus, {
              customerResourceId: this.customerResourceId,
              campusId: this.form.busTeamId,
            }, (ret) => {
              if (ret.success) {
                this.$toast('分配成功')
                this.$emit('completed')
                this.handleCancel()
              } else {
                this.$alert(ret.desc)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      alloFollow () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            io.post(io.alloFollow, {
              customerResourceId: this.customerResourceId,
              followId	: this.form.followId,
            }, (ret) => {
              if (ret.success) {
                this.$toast('分配成功')
                this.$emit('completed')
                this.handleCancel()
              } else {
                this.$alert(ret.desc)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCancel () {
        this.$refs.win.close()
      },
      getFollows () {
        io.post(io.follows, {
          busTeamId: this.form.busTeamId
        }, (ret) => {
          this.follows = ret.data
        })
      },
      show:function(){
        this.$refs.win.show( { width : 600 } )
        if (this.type === 'operator') {
          this.loadAllBusTeamList()
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .m-dispatch-detail {
    .title {
      margin-top: 20px;
      text-align: left;
      margin-left: 72px;
      color: #dd514c;
    }
    .el-form {
      width: 550px;
      margin: 0 auto;
      text-align: left;
      margin-top: 10px;
      .el-select, .el-date-editor.el-input {
        width: 250px;
      }
    }
  }
</style>
